analog clock - 5

code:
        <div class="clock">
            <div>
              <div class="detail date"></div>
              <div class="detail day"></div>
            </div>
            <div class="center"></div>
            <div>
              <div class="hour"></div>
              <div class="minute"></div>
              <div class="second"></div>
            </div>
            <div>
              <span class="h3">3</span>
              <span class="h6">6</span>
              <span class="h9">9</span>
              <span class="h12">12</span>
            </div>
            <div class="dials"></div>
        </div>
        <style>
            /* body{background-color: #105969; } */
            .clock{background: radial-gradient(circle at center, #f8efef, #00d0ff, #000000); width: 300px; height: 300px; 
                margin: 8px auto 0; border-radius: 50%; position: relative; box-shadow: 0 2vw 4vw -1vw rgba(0, 0, 0, 0.8);}
            .center{width: 14px; height: 14px; border-radius: 50%; background: gold; top: 0; left: 0; right: 0; bottom: 0; 
                margin: auto; position: absolute; z-index: 10;  box-shadow: 0 2px 4px -1px black;}
            .hour{position: absolute; z-index: 5; width: 4px; height: 65px; background: gold; top: 79px; 
                transform-origin: 50% 72px; left: 50%; margin-left: -2px; border-top-left-radius: 50%;
            border-top-right-radius: 50%; box-shadow: 0 2px 4px -1px black;}
            .minute{ position: absolute; z-index: 6; width: 4px; height: 100px; background: gold; top: 46px; left: 50%;
                 margin-left: -2px; border-top-left-radius: 50%; border-top-right-radius: 50%; transform-origin: 50% 105px;
                  box-shadow: 0 1px 2px -1px black;}
            .second{position: absolute; z-index: 7; width: 2px; height: 120px; background: rgb(255, 0, 0); top: 26px;
                left: 50%; margin-left: -1px; border-top-left-radius: 50%;border-top-right-radius: 50%; 
                transform-origin: 50% 125px;}
            span{display: inline-block; position: absolute; color: white; font-size: 25px; font-family: 'Poiret One', sans-serif; 
            font-weight: 700; z-index: 4; }
            .h12{top: 30px; left: 50%;  margin-left: -9px;}
            .h3{top: 140px; right: 30px;}
            .h6{ bottom: 30px; left: 50%; margin-left: -5px;}
            .h9{ left: 32px; top: 140px;}
            .dials{position: absolute; z-index: 2; width: 2px; height: 12px; background: rgb(215, 215, 215); left: 50%; 
                margin-left: -1px; transform-origin: 50% 150px;}
            .dials:nth-of-type(5n){ position: absolute; z-index: 2; width: 4px; height: 25px; background: rgb(102, 102, 102); left: 50%; 
                margin-left: -1px; transform-origin: 50% 150px;}
            .detail{position: absolute; width: 120px; height: 20px; border-radius: 7px;
                background: rgb(119, 119, 119); text-align: center; line-height: 20px; color: white; 
                font-size: 11px;  top: 200px; left: 50%; margin-left: -60px; font-family: "Poiret One", sans-serif; 
                font-weight: 700; z-index: 3; letter-spacing: 3px;}
            .date{top: 80px;}
            .day{top: 200px;}
        </style>
        <script>
            var dialLines = document.getElementsByClassName('dials');
            var clockE1 = document.getElementsByClassName('clock')[0];
            for(var i = 1; i < 60; i++){
                //Appends div elements with class 'dials' inside the clock element
                clockE1.innerHTML += "<div class='dials'></div>"
                //see rotation for each line
                dialLines[i].style.transform = "rotate(" + 6 * i + "deg)";
            }
            function clock(){
                var weekDay = ["Sunday", "Monday", "Tuesday",   "Wednesday", "Thursday",  "Friday", "Saturday"];
                var d = new Date(); 
                var h = d.getHours(); 
                var m = d.getMinutes(); 
                var s = d.getSeconds(); 
                var date = d.getDate(); 
                var month = d.getMonth() + 1; 
                var year = d.getFullYear(); 
    
                var hDeg = h * 30 + m * (360 / 720); // calculates degrees for hour hand
                var mDeg = m * 6 + s * (360 / 3600); // calculates degree for minute hand
                var sDeg = s * 6; // calculates degreee for second hand
    
                var hE1 = document.querySelector('.hour'); 
                var mE1 = document.querySelector('.minute'); 
                var sE1 = document.querySelector('.second'); 
                var dateE1 = document.querySelector('.date');
                var dayE1 = document.querySelector('.day'); 
    
                var day = weekDay[d.getDay()]; 
    
                if(month < 9){
                    month = "0" + month; //Prefixes '0' for months less than 10 to match format
                }
    
                hE1.style.transform = "rotate(" +hDeg + "deg)"; //Rotates hour hand based on the calculated degree
                mE1.style.transform = "rotate(" + mDeg + "deg)"; // Rotates minute hand based on the calculated degree
                sE1.style.transform = "rotate(" + sDeg + "deg)"; // Rotates second hand based on the calculated degree
                dateE1.innerHTML = date + "/" + month + "/" + year; 
                dayE1.innerHTML = day;
    
            }
            setInterval(clock, 100); // Calls the 'clock' function every 100 milliseconds
        </script>